<link rel="stylesheet" type="text/css" href="<?= base_url() ?>file/js/easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="<?= base_url() ?>file/js/easyui/themes/icon.css">
<script type="text/javascript" src="<?= base_url() ?>file/js/easyui/jquery.easyui.min.js"></script>


<link rel="stylesheet" href="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/themes/ui-lightness/jquery.ui.all.css">
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/jquery-1.7.1.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/jquery.bgiframe-2.1.2.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.core.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.button.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.draggable.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.position.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.resizable.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.dialog.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.effects.core.js"></script>

<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.autocomplete.js" type="text/javascript"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.datepicker.js"></script>
<style>
	.ui-autocomplete
	{
		max-height: 100px;
		overflow-y: auto;
		
		overflow-x: hidden;
		padding-right: 20px;
	}

	table tr:last-child td:first-child {
		-moz-border-radius-bottomleft:10px;
		-webkit-border-bottom-left-radius:10px;
		border-bottom-left-radius:10px
	}

	table tr:last-child td:last-child {
		-moz-border-radius-bottomright:10px;
		-webkit-border-bottom-right-radius:10px;
		border-bottom-right-radius:10px
		}
</style>


<?php
    #### tampilkan alert jika terdapat kesalahan dalam memasukkan data
				$msg = $this->session->flashdata('message');
                $salah = validation_errors();
                if($salah <> ""){
                        echo'<div id="box-messages">
                                <div class="messages">
                                        <div id="message-error" class="message message-error">
                                                <div class="image">
                                                        <img src="'. base_url() .'file/shell/smooth/resources/images/icons/error.png" alt="Error" height="32" />
                                                </div>
                                                <div class="text">
                                                        <h6>Terdapat kesalahan dalam memasukkan data:</h6>
														<br />
                                                        <span>'. validation_errors() .'</span>
                                                </div>
                                                <div class="dismiss">
                                                        <a href="#message-error"></a>
                                                </div>
                                        </div>
                                </div>
                        </div>';
                }		
				else if($msg <> ""){
					echo'<div id="box-messages">
								<div class="messages">
										 <div id="message-error" class="message message-error">
												 <div class="image">
														<img src="'. base_url() .'file/shell/smooth/resources/images/icons/error.png" alt="Error" height="32" />
												</div>
												<div class="text">
														<h6>'. $msg .'</h6>
												</div>
												<div class="dismiss">
														<a href="#message-error"></a>
												</div>
										</div>
								</div>
						</div>';
				}
?>

		
<form id="form" action="<?=$_SERVER['PHP_SELF']?>" method="post">		
<div class="panel-wrap" style="height: auto">
	
	<div class="panel-header-div">Cluster Information</div>
    <div class="panel-body-div">
        <div class="left-panel-body">
            <h2><?=$ter_name?></h2>
            <!--<p><?=$dist_address?></p>-->
		
		
        </div>
        <div class="right-panel-body">
            <table class="table-right-panel" width="100%" border="solid black 1px">
                <tr align="center" class="tr-colour">
                    <th width="50%" align="center">Date</th>
                    <th align="center">Receipt No</th>
                </tr>
                
                <script type="text/javascript">
				        $(function() {
							$("#date").datepicker({ 
								dateFormat: 'yy-mm-dd',
								showOn: 'button',
								buttonImageOnly: true, 
								buttonImage: '<?= base_url() ?>file/js/easyui/themes/pepper-grinder/images/datebox_arrow.png' 
							});
				        });
				</script>
                <tr align="center" class="gray">
                    <td width="50%" align="center">
						<input size="15%"  type="text" id="date" name="receipt_date" onclick="this.value='';" 
							value="<?php 
								date_default_timezone_set("Asia/Jakarta");
								echo date("Y-m-d");
							?>"/>
					</td>                    
					<td class="readonly" align="center" >
						<span style="font-size: 16pt"><b>Auto</b></span>
					</td>
                    
                </tr>
            </table>
		
        </div>
        
    </div>
</div>


<script type="text/javascript">
var test = 2;
var hasSalesId = false;
function processSalesId()
{
	hasSalesId = true;
	var hasItem = false;
	var add_tuple = "";
	var add_popup_tuple = "";
	var ii = 0;
	
	var sf = $('select#sales-id option:selected').attr('class');
	$("#sales-name").val(sf);
	var sales_id = $("#sales-id").val();	
	
	//$(".wide").empty();
	$("#bodyTable").empty();
	$("#bodyPopup").empty();
	
	
	$.ajax({
		url: "<?php echo base_url(); ?>index.php/receipt/load_sales/"+sales_id,
		dataType:"json",
		success:function(data){
			$.each(data, function(i,n){
					
					add_tuple = "<tr align='center' id='new_tuple"+test+"' class='wide'>"+                                            
									"<td style='border:solid #D0D0D0 1px;'><input type='checkbox'/></td>"+
									"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:5%'>"+ n["iccid"] +"<input type='hidden' value='"+ n["iccid"] +"' name='iccid[]' /></div></td>"+ "|" +
									"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:5%'>"+ n["mdn"] +" <input type='hidden' name='mdn[]' value='"+ n["mdn"] +"' /></div></td>"+
									"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:5%'>"+ n["item_code"] +" <input type='hidden' name='item_code[]' value='"+ n["item_code"] +"' /></div></td>"+
									"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:5%'>"+ n["item_group_name"] +" <input type='hidden' name='item_group_name[]' value='"+ n["item_group_name"] +"' /></div></td>"+
									"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:5%'>"+ n["item_name"] +" <input type='hidden' name='item_name[]' value='"+ n["item_name"] +"' /></div></td>"+
								"</tr>";
					add_popup_tuple = "<tr align='center' class='wide'>"+
										"<td style='border:solid #D0D0D0 1px;'><input name='Chk"+ii+"' id='Chk"+ii+"' type='checkbox' value='" + n['iccid'] +","+ n['item_code'] +","+ n['item_group_name'] +","+ n['item_name'] +"'></td>"+
										"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:5%'>"+ n["iccid"] +"</div></td>"+
										"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:5%'>"+ n["mdn"] +"</div></td>"+
										"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:5%'>"+ n["item_code"] +"</div></td>"+
										"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:5%'>"+ n["item_group_name"] +"</div></td>"+
										"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:5%'>"+ n["item_name"] +"</div></td>"+
									"</tr>";
					
					$("#bodyTable").append(add_tuple);	
					$("#bodyPopup").append(add_popup_tuple);	
					ii++;
					test++;
					$("#hdnLine").val(ii);
			});
			if (ii==0)
			{
				alert(sf + " has no item.");
				$("#sales-id").val("");
			}
		},
		error: function(data){
		}
	});
	
	
	
}

function addList(listCount, val)
{
	for(jj=0;jj<listCount;jj++)
	{
		var result = new Array;
		var result = val[jj].split(",");
		
		add_tuple = "<tr align='center' id='new_tuple"+test+"' class='wide'>"+
			"<td style='border:solid #D0D0D0 1px;'><input type='checkbox'/></td>"+
			"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:5%'>"+ result[0] +"<input type='hidden' name='iccid[]' value='"+ result[0] +"'/></div></td>"+
			"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:5%'>"+ result[1] +"<input type='hidden' name='item_code[]'  value='"+ result[1] +"'/></div></td>"+
			"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:5%'>"+ result[2] +"<input type='hidden' name='item_group_name[]' value='"+ result[2] +"'/></div></td>"+
			"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:5%'>"+ result[3] +"<input type='hidden' name='item_name[]'  value='"+ result[3] +"'/></div></td>"+
		"</tr>";
		$('#table-updateable').append(add_tuple);
		test++;
	}
}

//delete row yang diceklis
function delete_checked(tableID) {
	try {
		var table = document.getElementById(tableID);
		var rowCount = table.rows.length;
		
		for(var i=1; i<rowCount; i++) {
			var row = table.rows[i];
			if (row.cells[0] != null)
			{
				var chkbox = row.cells[0].childNodes[0];
				if(null != chkbox && true == chkbox.checked) {
					table.deleteRow(i);
					rowCount--;
					i--;
				}
			}
		}
	}catch(e) {
		alert(e);
	}
}

$(document).ready(function() {
	//proses field salesRB

    /* 
    ** Tombol Add New Return kita sembunyiin dulu 
    **
	$('#btnSelect').click(function(){
		if (hasSalesId == false)
		{
			alert("Please choose sales Id first!");
			return false;
		}
		$('div#addIccid').dialog('open'); 
	});
	*/
    $('#btnSelect').hide();
	
	$('.check_all').click(
		function(){
			$(this).parent().parent().parent().parent().find("input[type='checkbox']").attr('checked', $(this).is(':checked'));   
		}
	);
	$('.check_all_popup').click(
		function(){
			$(this).parent().parent().parent().parent().find("input[type='checkbox']").attr('checked', $(this).is(':checked'));   
		}
	);

})
</script>
	
<div class="panel-wrap" style="height: auto">
	<div class="panel-header-div">Order Information</div>
    <div class="panel-body-div">
        <div class="child-panel-body">
		
        <div class="left-panel-body">

            <table class="table-right-panel" width="60%" border="solid black 1px">
                <tr align="center" class="tr-colour2">
                    <th width="20%" align="center">Sales ID</th>
                    <th align="center">Sales Name</th>
                </tr>
               
                <tr align="center" class="gray">			
					<td width="50%" align="center">					
						<select name="sales_id" id="sales-id"  onchange="processSalesId()">
						<option value="">--Select Sales Id--</option>
                        <?php 
								//edited by alfin akhret
								if($this->session->userdata('is_self_service') == 1)
								{ 
									foreach($salesID as $item):
										if ($item->user_id == $this->session->userdata('username'))
										{					
									?>
											<!-- <option class="<?php echo $item->user_id?>" value="<?php echo $item->user_name?>"><?php echo $item->user_name?></option> -->
											<option class="<?php echo $item->user_name?>" value="<?php echo $item->user_id ?>"><?php echo $item->user_id.' | '.$item->user_name; ?></option>
									<?php
										}
									endforeach;
								}
								else
								{
									foreach($salesID as $item):
								
									?>
											<!-- <option class="<?php echo $item->user_id?>" value="<?php echo $item->user_name?>"><?php echo $item->user_name?></option> -->
											<option class="<?php echo $item->user_name?>" value="<?php echo $item->user_id ?>"><?php echo $item->user_id.' | '.$item->user_name; ?></option>
									<?php
			
									endforeach;
								}

								?>
                        </select>		
						
					</td>                   
					
                    <td class="readonly" align="center"><input type="text" name="output" id="sales-name" disabled="true" class="input-readonly" /></td>
                    
                </tr>
            </table>
        </div>
    </div>
	

	
	
    <div class="child-panel-body">	
            <table id="table-updateable" class="table-right-panel" width="92%" style="margin-left: 19px;">
                <thead>
					<tr align="center" class="tr-colour3">
						<th style="width:3%"><input style="width:60%" id="select_all" class="check_all" type="checkbox" /></th>
						<th>ICCID</th>
						<th>MDN Code</th>
						<th>Item Code</th>
						<th>Item Group</th>
						<th>Description</th>
					</tr>
				</thead>
				<tbody id="bodyTable">
				</tbody>
                
            </table>
				
            <div class="summary"> 
            </div>
            
			<div class="buttons">
					<input name="btnSelect" type="button" id="btnSelect" value="Add">		
					<input type="button" onclick="delete_checked('table-updateable')" value="Remove" />
			</div>        
    </div>
    
	
    <div class="child-panel-body-2">	
        <table class="table-right-panel" style="margin-left: 19px; border: none; ">		
            <tr style="height: 15px;">
				<td style="text-align: left; font-weight: bold; font-size: 1.3em;">Remark:</td>
				<td ><input style="text-align: left; border: none; border-bottom: 1px solid black;" size="141%" type="text" name="remark"/></td>
            </tr>
			
        </table>
	
	</div>
    
        <div class="child-panel-body-2">
        
            <div class="buttons-2" style="margin: 0 auto">
                <input type="submit" value="Submit"/>
                <input type="button" value="Revert" onclick="processSalesId()" />
            </div>
		</div>
		
    </div>
</div>
</form>